<template>
	<view>
		<!-- 查看详情 -->
		<view v-if="type == 1">
			<uni-card title="客户信息">
			  <view>客户名称：<span>{{ information.name }}</span></view>
			  <view>手机号码：<span>{{ information.mobile }}</span></view>
			  <view>认证状态：<uni-tag text="已认证" type="success" v-if="information.isCertify == 1" />
			  <uni-tag text="未认证" type="warning" v-else />
			  </view>
			  <view>邮箱：<span v-if="information.email != null">{{ information.email }}</span><span v-else>--</span></view>
			  <view>备注：<span v-if="information.remark != null">{{ information.remark }}</span><span v-else>--</span></view> 
			  <view>变更时间：<span v-if="information.updateTime != null">{{ information.updateTime }}</span><span v-else>--</span></view>
			  <view>创建时间：<span>{{ information.createTime }}</span></view>
			  <view>黑名单：<uni-tag text="是" type="warning" v-if="information.status == 1" />
			  <uni-tag text="否" type="success" v-else /></view>
			  <view>所属企业：<span>{{information.companyName}}</span></view>
			  <view>客户类别：<span v-if="information.customerType == $order.ec_customer_type.sale">销售客户</span>
			       <span v-if="information.customerType == $order.ec_customer_type.supply">供应客户</span>
			  </view>
			</uni-card>
		</view>
		
		<!-- 修改 -->
		<view v-else>
		<uni-notice-bar single color="#00a660" background-color="#e6f6ef" :text="titleBar"/>
			<uni-forms ref="ruleForm" :modelValue="ruleForm" :rules="rules"  label-width="160rpx" type="line" label-align="right" class="change_form">
				<uni-forms-item label="所属企业" name="customerCompanyId" :required="true">
					<uni-data-select v-model="ruleForm.customerCompanyId" :localdata="customerCompanyList" :clear="false" @change="selectContractType" placeholder="请选择所属企业"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="姓名" name="name" :required="true">
					<uni-easyinput v-model="ruleForm.name" type="text" placeholder="请输入姓名" :clearable="false" :disabled="ruleForm.isCertify == 1" />
				</uni-forms-item>
				<uni-forms-item label="手机号码" name="mobile" :required="true">
					<uni-easyinput v-model="ruleForm.mobile" type="text" placeholder="请输入手机号码" :clearable="false" :disabled="ruleForm.isCertify == 1" />
				</uni-forms-item>
				<uni-forms-item label="邮箱" name="email" :required="false">
					<uni-easyinput v-model="ruleForm.email" type="text" placeholder="请输入邮箱" :clearable="false"/>
				</uni-forms-item>
				<uni-forms-item label="备注" name="remark" :required="false">
					<uni-easyinput v-model="ruleForm.remark" type="textarea" placeholder="点击添加备注,最多200字!" :clearable="false" />
				</uni-forms-item>
				<view class="submit_btn flex_between">
					<button size="mini" class="back-Btn" @click="cancel">取消</button>
					<button size="mini" class="next-Btn" @click="submit">确定</button>
				</view>
			</uni-forms>
			</view>
	</view>
</template>

<script>
	import { addCustomerCompanyStaff,getCustomerCompanyStaff,updateCustomerCompanyStaff} from "@/api/ec/work/customer/customerCompanyStaff";
	import {selectListCustomerCompany} from "@/api/ec/work/customer/customerCompany";
	import {getQueryObject} from "@/utils";
	export default {
		data() {
			return {
				titleBar:'修改企业客户资料',
				information:'',
				urlQuery: getQueryObject(window.location.href),
				type:'', //0修改 1查看
				customerCompanyList:[],
				// 表单参数
				ruleForm: {},
				// 表单校验
				rules: {
				   customerCompanyId: [
				            {required: true, message: "请选择所属企业", trigger: "blur"}
				          ],	
				  name: [
				    {required: true, message: "请输入姓名", trigger: "blur"},
				    {min: 2, max: 30, message: '姓名称长度需要在2-30个汉字或字符之间，不能包含特殊字符', trigger: 'blur'},
				  ],
				  mobile: [
				    {required: true, message: "请输入手机号码", trigger: "blur"},
				    {pattern: /^1[3456789]\d{9}$/, message: "请输入手机号码", trigger: "blur"}
				  ],
				  email: [
				    {type: "email", message: "请输入邮箱账号", trigger: "blur"},
				    {pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: "请输入正确的邮箱账号", trigger: "blur"}
				  ],
				},
			}
		},
		onLoad(option) {
			if(option.item){
			this.information = JSON.parse(option.item)
			this.ruleForm = this.information
			// 所属企业
			this.customerCompanyList = [{text:this.information.name,value:this.information.id}]
			this.type = option.type
			}
			/** 查询企业客户列表 */
			this.getCustomerCompanyList()
		},
		methods: {
			/** 查询企业客户列表 */
			getCustomerCompanyList() {
			  selectListCustomerCompany().then(response => {
				  var list = []
				  for(var i = 0;i<response.data.length;i++){
				  	var object = {};
				  	object.text = response.data[i].name; // 展示text
				  	object.value = response.data[i].id; // 用id查询
				  	list.push(object);							
				  }
			    this.customerCompanyList = list;
			    if (this.urlQuery != null && this.urlQuery.customerCompanyId != null) {
			      this.queryParams.customerCompanyId = parseInt(this.urlQuery.customerCompanyId);
			    }
			  });
			},   
			cancel(){
				uni.navigateBack({
					delta:1
				})
			},
			/** 修改 */
			submit(){
				this.$refs.ruleForm.validate().then(res => {
				if (this.ruleForm.id != null) {
				      updateCustomerCompanyStaff(this.ruleForm).then(response => {
				        this.$modal.msgSuccess("修改成功");
						uni.$emit('refreshData');
						uni.navigateBack({
							delta:1
						})
				      });
				    } else {
				      addCustomerCompanyStaff(this.ruleForm).then(response => {
				        this.$modal.msgSuccess("新增成功");
						uni.$emit('refreshData');
						uni.navigateBack({
							delta:1
						})
				      });
				    }
				});          
			},
		}
	}
</script>

<style scoped lang="scss">
::v-deep .uni-input-input:disabled{color:#666666;}	
.submit_btn{
	margin-top: 52rpx;
	padding-bottom: 52rpx;
	justify-content: space-around;
	button{
		width: 40%;
		font-size: 28rpx;
	}
	.next-Btn{
		background-color: $uni-color-primary;
		border-radius: 10rpx;
		color: #fff;
	}
		
	.back-Btn{
		border-radius: 10rpx;
		border: solid 1rpx $uni-color-primary;
		color: $uni-color-primary;
		background: #fff;
	}
}	
::v-deep .uni-forms-item{margin-bottom: 26rpx;}
.change_form {padding:0 30rpx 0 20rpx;position: relative;}
::v-deep .uni-collapse-item__title-box{background: #fff;padding: 0;}
::v-deep .uniui-bottom{color: #ccc !important;}
page{background: $uni-bg-color;}
view{margin-bottom: 16rpx;}
span{font-weight: 600;}
</style>
